<template>
	<div style="position: relative;">
					{{version}}

			<section style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 0;">
<!-- 				<img style="width: 100%; height: 100%;" src="../../static/images/bgDone12.png"> -->
			</section>
		<section style="height: 24rem;width: 100%;z-index: 10;position: relative;margin-top: 10rem;display: flex;justify-content: center;align-items: center;">
			<section class="loginBg">
				<p style="text-align: center;font-size: 1.4rem;color: white;letter-spacing: 0.2rem;">用户登录</p>
				<section class="login-frame center-mid" >
					<mu-icon value="account_circle" color="white" style="padding-right: 0.4rem;" />
					<mu-text-field v-model="username" placeholder="请输入用户名"></mu-text-field>
				</section>
				<section class="login-frame center-mid" style="margin-top: 0.6rem;">
					<mu-icon value="lock_outline" color="white" style="padding-right: 0.4rem;" />
					<mu-text-field v-model="password" placeholder="请输入密码"></mu-text-field>
				</section>
				
				<mu-button class="mu-loginBtn"  @click="login()">登录
				</mu-button>
				
				<section style="display: flex;color: white;justify-content:space-between;margin-top: 0.8rem;">
					<span >忘记密码</span>
					<span @click="gotoAddress({path:'register'})">注册账号</span>
				</section>
		</section>
		<!--<video poster="https://vod.cn-north-1.huaweicloud.com/asset/08cfed3161cdcae4dd6019ef483faa4f/cover/Cover0.png" 
			src="https://vod.cn-north-1.huaweicloud.com/asset/08cfed3161cdcae4dd6019ef483faa4f/play_video/VideoJoiner180109134912_H.264_480X270_HEAACV1_300.mp4" controls="controls" style="height: 300px;">
			your browser does not support the video tag
		</video>-->
		</section>
		

		
	</div>
</template>

<script>
	export default {
		data(){
			return{
//				loginBg:'static/images/bgDone11.jpg',
				username:'',
				password:'',
				version:''
			}
		},mounted(){
	//获取版本号注释
	this.version=window.localStorage.version
   
  },
		methods:{
			gotoAddress(path){
				var self=this
				setTimeout(function(){
					self.$router.push(path)
				},200)
	      	},
	      	async login(){
	      		let that=this
	      		console.info('登录了')
	      		that.axios.post(that.global.homeSrc+'/Login/phoneLogin',{
	      			'uid':that.username,
	      			'password':that.password
	      		}).then(function(response){
					if(response.data.erroInfo=='success'){
	           			localStorage.userNumber=response.data.uid
	           			//this.GLOBAL.openid = response.data.uid
						localStorage.token=response.data.token
	           			let redirect = decodeURIComponent(that.$route.query.redirect || '/index2');
						console.info('zou')
	           			setTimeout(function(){
	           				that.gotoAddress({path:'index'})
//	           				if(lastPath!='/login'){
//			          			that.$router.push({
//				            		path: 'index2'
//				          		})
//				          	}else{
//				          		that.$router.push({
//					            	path: 'index2'
//					          	})
	           			},1480)
	           			//that.showToast('登录成功')
	           			
	           		}else if(response.data.erroInfo=='账号或密码不正确'){
						that.$message({type: 'info',message: '账号或密码不正确',duration:1500});
	           			console.info(response.data.erroInfo)
	           		}
	      		}).catch(function(error){
	      			 console.log(error)
	      			 if(error=='timeout of 50000ms exceeded'){
	      			 that.$message({type: 'info',message: '登录超时，请重新登录',duration:1500});
	      			 console.log('失败')
	      			 }else{
	      			 that.$message({type: 'info',message: '登录失败，请重新登录',duration:1500});
	      			 }
	      		})
	      	}
		}
	}
</script>

<style scoped>
.loginBg{
	width: 86%;
	height: 100%;
	/*background: skyblue;*/
}
.center-mid{
	justify-content: center;
	align-items: center;
}
.login-frame{
	background-color:rgba(255,255,255,0);
	display: flex; 
	flex-direction: row; 
	font-size: 1rem;
	padding: 0;
	font-family: "微软雅黑";
	border-bottom: 1px solid rgba(255,255,255,0.6);
}
.login-frame:nth-child(1){
	border-bottom: 1px solid #b5b3be;
}
/*.login-strip input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#fff;
	color:#fff
}*/


.login-frame label{
	flex: 1.2; 
	color: #9e9e9e;
	text-align: center;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
/*border: 1px solid #CCC!important;*/
}
.login-frame label{
	color:#989898
}
.login-frame input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:white;
	color:white !important;
	font-size: 0.9rem;
	 /*-webkit-box-shadow: 0 0 0 0.8rem #fff inset;*/
}
.mu-loginBtn{
	color: white !important;
	border-radius: 3px !important;
	height: 2.6rem !important;
	background-color: #0090ff !important;
	width: 100%;
	margin-top: 2rem !important;

}
</style>